<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        
        #box {
            width: 600px;
            height: 700px;
            margin: auto;
        }
        
        ul li {
            text-align: center;
            line-height: 130px;
        }
        
        ul li input {
            width: 250px;
            height: 20px;
        }
        
        .lv {
            color: rgb(12, 160, 15);
        }
        
        .h {
            color: red;
        }
        
        #sp3 {
            font-size: 6px;
        }
        
        #sp {
            font-size: 6px;
        }
    </style>
</head>

<body>
    <div id="box">
        <ul>
            <li>用户名：<input id="inp1" type="text" value=""> <span id="sp">用户名格式为3-8位数字或字母(必须以字母开头)</span></li>
            <li>手机号：<input id="inp2" type="text"><span id="sp2"></span></li>
            <li>密码：<input id="inp3" type="password"><span id="sp3">密码格式为6-8位数字和字母(不分大小写)</span></li>
            <li>验证码：<input type="text"> <button>获取验证码</button></li>
            <li>邮箱：<input id="inp4" type="text"><span id="sp4">输入正确的邮箱格式</span></li>
            <li>身份证：<input id="inp5" type="text"><span id="sp5">请输入18位或者15位格式的有效身份证</span></li>
        </ul>
    </div>
</body>
<script>
    inp1.onblur = function() {
        var yhm = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
        console.log(yhm.test(inp1.value));
        if (yhm.test(inp1.value)) {
            sp.className = 'lv'
            sp.innerHTML = '√'
            return true;
        } else {
            sp.className = 'h'
            sp.innerHTML = '用户名格式错误'
            return false;
        }
    }
    inp2.onblur = function() {
        var yhm = /^1\d{10}$/;
        console.log(yhm.test(inp2.value));
        if (yhm.test(inp2.value)) {
            sp2.className = 'lv'
            sp2.innerHTML = '√'
            return true;
        } else {
            sp2.className = 'h'
            sp2.innerHTML = '格式错误'
            return false;
        }
    }
    inp3.onblur = function() {
        var yhm = /^[a-zA-Z0-9]{6,8}$/;
        console.log(yhm.test(inp3.value));
        if (yhm.test(inp3.value)) {
            sp3.className = 'lv'
            sp3.innerHTML = '√'
            return true;
        } else {
            sp3.className = 'h'
            sp3.innerHTML = '格式错误'
            return false;
        }
    }
    inp5.onblur = function() {
        console.log(1);
        let sfz18 = /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
        let sfz15 = /^([1-6][1-9]|50)\d{4}\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}$/
        if (sfz18.test(inp5.value) || sz15.test(inp5.value)) {
            sp5.className = 'lv'
            sp5.innerHTML = '√'
            return true
        } else {
            sp5.className = 'h'
            sp5.innerHTML = '格式错误'
            return false
        }
    }
    inp4.onblur = function() {
        let youxiang = /^[0-9a-zA-Z]+([.-_]*[0-9a-zA-Z]+)*@([0-9a-zA-Z]+[-_]*[0-9a-zA-Z]+.)+[0-9a-zA-Z]{2,6}$/
        if (youxiang.test(inp4.value)) {
            sp4.className = 'lv'
            sp4.innerHTML = '√'
            return true
        } else {
            sp4.className = 'h'
            sp4.innerHTML = '格式错误'
            return false
        }
    }
</script>

</html>